<template>
    <div class="dynamics">
        <div class="epidemic">
            <div class="epidemic-header">
                <div class="epidemic-header-t">
                    <div class="epidemic-item">
                        <h3>现存确诊</h3>
                        <div class="diagnosis">
                            <i class="diagnosisColor">{{nationwideData.currentConfirmedCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="diagnosisColor">{{nationwideData.currentConfirmedIncr>0?`+${nationwideData.currentConfirmedIncr}`:nationwideData.currentConfirmedIncr}}</i>
                        </div>
                        <div class="separate-line"></div>
                    </div>
                    <div class="epidemic-item">
                        <h3>现存疑似</h3>
                        <div class="diagnosis">
                            <i class="suspectedColor">{{nationwideData.suspectedCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="suspectedColor">{{nationwideData.suspectedIncr>0?`+${nationwideData.suspectedIncr}`:nationwideData.suspectedIncr}}</i>
                        </div>
                        <div class="separate-line"></div>
                    </div>
                    <div class="epidemic-item">
                        <h3>现存重症</h3>
                        <div class="diagnosis">
                            <i class="severeColor">{{nationwideData.seriousCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="severeColor">{{nationwideData.seriousIncr>0?`+${nationwideData.seriousIncr}`:nationwideData.seriousIncr}}</i>
                        </div>
                    </div>
                </div>
                <div class="epidemic-header-b">
                    <div class="epidemic-item">
                        <h3>累计确诊</h3>
                        <div class="diagnosis">
                            <i class="cumulativeDiagnosisColor">{{nationwideData.confirmedCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="cumulativeDiagnosisColor">{{nationwideData.confirmedIncr>0?`+${nationwideData.confirmedIncr}`:nationwideData.confirmedIncr}}</i>
                        </div>
                        <div class="separate-line"></div>
                    </div>
                    <div class="epidemic-item">
                        <h3>累计治愈</h3>
                        <div class="diagnosis">
                            <i class="cumulativeSuspectedColor">{{nationwideData.curedCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="cumulativeSuspectedColor">{{nationwideData.curedIncr>0?`+${nationwideData.curedIncr}`:nationwideData.curedIncr}}</i>
                        </div>
                        <div class="separate-line"></div>
                    </div>
                    <div class="epidemic-item">
                        <h3>累计死亡</h3>
                        <div class="diagnosis">
                            <i class="cumulativeSevereColor">{{nationwideData.deadCount}}</i>
                        </div>
                        <div class="compare">昨日
                            <i class="cumulativeSevereColor">{{nationwideData.deadIncr>0?`+${nationwideData.deadIncr}`:nationwideData.deadIncr}}</i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="epidemic-form">
                <h3>国内疫情</h3>
                <p class="epidemic-formInf">7:00-10:00为更新高峰，数据若滞后敬请谅解</p>
                <div class="epidemicTable-wrap">
                    <table class="epidemicTable">
                        <thead>
                            <tr>
                                <th width="80">地区</th>
                                <th width="70">现有确诊</th>
                                <th width="70">治愈</th>
                                <th width="65">死亡</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in regionData"
                                :key="index">
                                <td class="tabLed">{{item.provinceShortName}}</td>
                                <td>{{item.confirmedCount}}</td>
                                <td>{{item.curedCount}}</td>
                                <td>{{item.deadCount}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        myMenu
    },
    data () {
        return {
            userInfo: {}, // 用户信息
            registerInfo: {}, // 登录信息
            showPositionValue: false,
            tosPosition: 'center',
            nationwideData: {}, //  全国数据
            regionData: {} // 地区数据
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.registerInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.GetYqData(0) // 全国数据
        this.GetYqData(1) // 地区数据
    },
    methods: {
        GetYqData (type) {
            let params = {
                'type': type
            }
            this.$axiosAjax.GetYqData(params).then((res) => {
                if (res.data.code === 0) {
                    if (type) {
                        this.regionData = JSON.parse(res.data.data.JsonObj).newslist
                    } else {
                        this.nationwideData = JSON.parse(res.data.data.JsonObj).newslist[0].desc
                    }
                } else {
                    this.$vux.toast.text(res.data.info)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.dynamics {
    font-size: 14px;
    .epidemic {
        padding: 40px 20px 30px 20px;
        .epidemic-header-t,
        .epidemic-header-b {
            display: flex;
            justify-content: space-between;
        }
        .epidemic-item {
            text-align: center;
            position: relative;
            flex: 1;
            margin-bottom: 20px;
            h3 {
                font-size: 14px;
                line-height: 32px;
                color: #333;
                font-weight: bold;
            }
            .diagnosis {
                font-size: 22px;
                line-height: 28px;
                i {
                    font-weight: bold;
                }
            }
            .compare {
                color: #999;
                font-size: 14px;
                line-height: 18px;
            }
            .diagnosisColor {
                color: #ff6a57;
            }
            .suspectedColor {
                color: #f1a017;
            }
            .severeColor {
                color: #476da0;
            }
            .cumulativeDiagnosisColor {
                color: #e83132;
            }
            .cumulativeSuspectedColor {
                color: #10aeb5;
            }
            .cumulativeSevereColor {
                color: #4d5054;
            }
            .separate-line {
                position: absolute;
                top: 26px;
                right: 0;
                width: 1px;
                height: 28px;
                background: #eee;
            }
        }
        .epidemic-form {
            margin-top: 20px;
            h3 {
                color: #000;
                font-size: 14px;
                line-height: 30px;
                font-weight: bold;
            }
            .epidemic-formInf {
                color: #999;
            }
            .epidemicTable-wrap {
                margin-top: 20px;
                .epidemicTable {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 3px 6px;
                    text-align: center;
                    thead {
                        line-height: 40px;
                    }
                    .tabLed {
                        background-color: #2467f6;
                        border-radius: 5px 0 0 5px;
                        color: #fff;
                        font-weight: bold;
                    }
                    td {
                        background: #f5f6f7;
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}
</style>
<style>
</style>
